{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}
<div class="row" id="provision_vms_dashboard">
  <div class="large-12 columns">
    <h4>{{tr "Virtual Machines"}}</h4>
    <div class="row">
      <div class="large-3 medium-4 columns text-center">
        <div class="row">
          <div class="large-12 columns">
            <h2>
              <span  id="provision_dashboard_total"> <i class="fa fa-spinner fa-spin"></i>
              </span>
              <br>
              <small class="subheader">{{tr "TOTAL"}}</small>
            </h2>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns">
            <a href"#" class="medium button success provision_create_vm_button"> <i class="fa fa-lg fa-plus-square"/></a>
            <a href"#" class="medium button provision_vms_list_button">
              <i class="fa fa-lg fa-th"/></a>
          </div>
        </div>
      </div>
      <div class="large-9 medium-8 columns text-center">
        <div class="large-10 medium-12 large-centered columns">
        <div class="large-3 medium-3 small-6 columns">
          <h4>
            <span id="provision_dashboard_running">
              <i class="fa fa-spinner fa-spin"></i>
            </span><br>
            <small class="subheader">{{tr "RUNNING"}}</small>
          </h4>
        </div>
        <div class="large-3 medium-3 small-6 columns ">
          <h4>
            <span id="provision_dashboard_deploying" >
              <i class="fa fa-spinner fa-spin"></i>
            </span><br>
            <small class="subheader">{{tr "DEPLOYING"}}</small>
          </h4>
        </div>
        <div class="large-3 medium-3 small-6 columns">
          <h4>
            <span  id="provision_dashboard_off">
              <i class="fa fa-spinner fa-spin"></i>
            </span><br>
            <small class="subheader">{{tr "OFF"}}</small>
          </h4>
        </div>
        <div class="large-3 medium-3 small-6 columns ">
          <h4>
            <span  id="provision_dashboard_error">
              <i class="fa fa-spinner fa-spin"></i>
            </span><br>
            <small class="subheader">{{tr "ERROR"}}</small>
          </h4>
        </div>
        <br>
        </div>
        <div class="large-12 columns" id="dashboard_vm_accounting">
          <div class="large-4 medium-12 columns text-center">
            <input style="display:none;" value="vm" id="acct_group_by"/>
            <div class="row">
              <div class="large-12 columns graph_legend">
                <span class="subheader">
                  <span>{{tr "CPU hours"}}</span>
                </span>
              </div>
              <div class="large-12 columns">
                <div class="large-12 columns centered graph" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
              </div>
            </div>
          </div>
          <div class="large-4 medium-12 columns text-center">
            <div class="row">
              <div class="large-12 columns graph_legend">
                <span class="subheader">
                  <span>{{tr "Memory GB hours"}}</span>
                </span>
              </div>
              <div class="large-12 columns">
                <div class="large-12 columns centered graph" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
              </div>
            </div>
          </div>
          <div class="large-4 medium-12 columns text-center">
            <div class="row">
              <div class="large-12 columns graph_legend">
                <span class="subheader">
                  <span>{{tr "Disk MB hours"}}</span>
                </span>
              </div>
              <div class="large-12 columns">
                <div class="large-12 columns centered graph" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>